<template>
  <div class="content">
    <div class="top_filter">
      <div class="top_filter_col">
        <div class="block">
          <span class="top_filter_col_tit ">收付日期</span>
          <el-date-picker
            v-model="searchFrom.transactionDate1"
            type="datetimerange"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </div>
      </div>

      <div class="top_filter_col">
        <span class="top_filter_col_tit">收支原因</span>
        <el-cascader v-model="searchFrom.ofReason" :options="reasonList" :props="{ emitPath:false,expandTrigger: 'hover',label:'rname',value:'rid',children:'paramst'}"
                     :show-all-levels="false">
            <span value="">
                不限
              </span>
          <template slot-scope="{ node, data }"  v-if="data.rtype=='收入'">

            <span >{{ data.rname }}</span>
          </template>
        </el-cascader>
      </div>
      <div class="top_filter_col">
        <span class="top_filter_col_tit">资金帐户</span>
        <el-select prop="account" v-model="searchFrom.ofAccount " placeholder="请选择">
          <el-option-group v-for="group in accountOptions" :key="group.atype" :label="group.atype" >
            <el-option style="font-size: 14px;" v-for="item in group.options" :key="item.aid" :label="item.aname" :value="item.aid">
            </el-option>
          </el-option-group>
        </el-select>
      </div>
      <div class="top_filter_col">
        <div class="block">
          <span class="top_filter_col_tit ">凭证日期</span>
          <el-date-picker
            v-model="searchFrom.proofDate1"
            type="datetimerange"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </div>
      </div>

      <div class="top_filter_col">
        <span class="top_filter_col_tit">交易日期</span>
        <el-date-picker clearable
                        v-model="searchFrom.createtime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择交易日期">
        </el-date-picker>
      </div>
      <div class="top_filter_col">
        <span class="top_filter_col_tit ">类型</span>
        <el-select v-model="searchFrom.dtype" placeholder="请选择">
          <el-option label="不限" value=""></el-option>
          <el-option label="收入" value="收入"></el-option>
          <el-option label="支出" value="支出"></el-option>
          <el-option label="转移" value="转移"></el-option>
          <el-option label="应收款" value="应收款"></el-option>
          <el-option label="应付款" value="应付款"></el-option>
        </el-select>
      </div>
      <div class="top_filter_col">
        <div class="block">
          <span class="top_filter_col_tit ">预计收付日期</span>
          <el-date-picker
            v-model="searchFrom.predictDate1"
            type="datetimerange"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </div>
      </div>
      <div class="top_filter_col">
        <span class="top_filter_col_tit ">营业税</span>
        <el-select v-model="searchFrom.taxRateType" placeholder="请选择">
          <el-option value="">不限</el-option>
          <el-option value="应税">应税</el-option>
          <el-option value="免税" selected="selected">免税</el-option>
          <el-option value="零税率">零税率</el-option>
        </el-select>
      </div>
      <div class="top_filter_col">
        <span class="top_filter_col_tit ">交易情况</span>
        <el-select v-model="searchFrom.finished" placeholder="请选择">
          <el-option value="">不限</el-option>
          <el-option label="未完成" value="0">未完成</el-option>
          <el-option label="已完成" value="1" selected="selected">已完成</el-option>
        </el-select>
      </div>
      <div class="top_filter_col">
        <span class="top_filter_col_tit ">交易金额范围</span>
        <el-input type="text" v-model="searchFrom.M1" style="width: 180px;" placeholder="请输入开始范围"/>
        ~
        <el-input v-model="searchFrom.M2" type="text" style="width:180px;" placeholder="请输入结束范围"/>
      </div>
      <div class="top_filter_col">
        <span class="top_filter_col_tit ">附件</span>
        <el-select v-model="searchFrom.attachment">
          <el-option value="">不限</el-option>
          <el-option label="无附件" value="0">无附件</el-option>
          <el-option label="有附件" value="/" selected="selected">有附件</el-option>
        </el-select>
      </div>
      <div class="top_filter_col">
        <span class="top_filter_col_tit ">对象</span>
        <el-select v-model="searchFrom.object" placeholder="请输入对象" >
          <el-option value="" label="不限" />
          <el-option v-for="itme in ObjList" :value="String(itme.objId)" :label="itme.objName" :key="String(itme.objId)" />
        </el-select>
      </div>
      <div class="top_filter_col">
        <span class="top_filter_col_tit ">标签</span>
        <el-select v-model="searchFrom.tag" autocomplete="off">
          <el-option v-for="itme in labelList" :value="String(itme.labelId)" :label="itme.labelName" :key="String(itme.labelId)"/>
        </el-select>
      </div>
      <div class="top_filter_col">
				<span class="top_filter_col_tit">
					<el-button class="el-icon-search" size="small" type="success" @click="searchFun()">搜索</el-button>
										<el-button class="el-icon-search" size="small" type="primary"
                               @click="handleExport">导出Excel</el-button>
				</span>
      </div>

    </div>
    <div class="top_filter">
      <div class="top_filter_col" style="width: 100px;">交易明细</div>
      <div class="top_filter_col">收入金额：{{incomeJe}}</div>
      <div class="top_filter_col" style="margin-left: 10px;">支出金额：{{disbuersJe}}</div>
    </div>
    <el-table :data="tableData" border>
      <el-table-column align="center" prop="dtype" label="类型">
        <template slot-scope="scope">
          <span class="btn" style="background: #67C23A;" v-if="scope.row.dtype=='收入'">收入</span>
          <span class="btn" style="background: #409EFF;" v-if="scope.row.dtype=='支出'">支出</span>
          <span class="btn" style="background: #a6b1bb;" v-if="scope.row.dtype=='转移'">转移</span>
          <span class="btn" style="background: #82b6ec;" v-if="scope.row.dtype=='应收款'">应收款</span>
          <span class="btn" style="background: #436e9a;" v-if="scope.row.dtype=='应付款'">应付款</span>
        </template>
      </el-table-column>
      <el-table-column label="收付时间" align="center" prop="transactionDate" sortable width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.transactionDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="资金账户" align="center" prop="ofAccount">
        <template slot-scope="scope">
          <div>
            <div v-if="scope.row.dtype!='转移'">
                   <span v-for="itme in accountList" v-if="itme.aid==scope.row.ofAccount">
                    {{itme.aname}}
                   </span>
            </div>
            <div v-if="scope.row.dtype=='转移'">
                   <span v-for="itme in accountList">
                     <span v-if="itme.aid==scope.row.ofAccount">
                     {{itme.aname}}
                     </span>
                   </span>
                   <span v-for="itme in accountList">
                    <span v-if="itme.aid==scope.row.inAccount">
                     ==>{{itme.aname}}
                     </span>
                   </span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="交易原因" align="center" prop="ofReason">
        <template slot-scope="scope">
          <div v-for="itme in reasonList">
            <span v-if="scope.row.ofReason==itme.rid">{{itme.rname}}</span>
          </div>
          <span v-if="scope.row.dtype=='转移'">移转</span>
        </template>
      </el-table-column>
      <el-table-column label="交易金额" align="center" prop="money"/>
      <el-table-column label="目标金额" align="center" prop="mainCurrencyMoney"/>
      <el-table-column label="对象" align="center" prop="object">
        <template slot-scope="scope" >
          <span v-for="itme in ObjList" v-if="scope.row.object==String(itme.objId)">{{itme.objName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="" label="币种">
        <template slot-scope="scope">
          <span v-for="itme in currencyList" v-if="scope.row.ofCurrency==itme.cid">
            {{itme.cnName}}({{itme.enName}})
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="附注说明" prop="comment"/>
      <el-table-column align="center" label="标签" prop="tag" width="120px">
        <template slot-scope="scope">
          <span v-for="itme in labelList">
            <span v-for="itme1 in scope.row.tag" v-if="itme1==itme.labelId"><el-tag type="info">{{itme.labelName}}</el-tag> </span>
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="营业税" prop="tax"/>
      <el-table-column align="center" label="手续费" prop="serviceCharge"/>
      <el-table-column align="center" label="税率类型" prop="taxRateType"/>
      <el-table-column align="center" label="发票号码" prop="invoice"/>
      <el-table-column align="center" label="附件">
        <template slot-scope="scope">
          <a target="_blank" v-if="scope.row.attachment!=0 && scope.row.attachment!=null"
             :href="url+scope.row.attachment">
            <el-button type="primary" size="mini">查看</el-button>
          </a>
          <a target="_blank" v-if="scope.row.attachment!=0 && scope.row.attachment!=null">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleDownload(scope.row)"
            >下载
            </el-button>
          </a>

        </template>
      </el-table-column>
      <el-table-column width="200px" fixed="right" align="center" label="功能">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="showEditPop(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="del(scope.row.tid)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div class="pagination_box">
      <pagination
        v-show="total>0"
        :total="total"
        :page-sizes="[7, 14, 28, 56]"
        :page-size="7"
        :page.sync="searchFrom.pageNum"
        :limit.sync="searchFrom.pageSize"
        @pagination="getData"
      />
    </div>


    <!-- 修改项目弹出层 -->
    <el-dialog title="修改" :visible.sync="showEdit" width="600px">
      <el-form :model="editFrom">
        <el-form-item label="收付日期" :label-width="formLabelWidth">
          <el-date-picker
            v-model="editFrom.transactionDate"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="凭证日期" :label-width="formLabelWidth">
          <el-date-picker
            v-model="editFrom.proofDate"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="附注说明" :label-width="formLabelWidth">
          <el-input v-model="editFrom.comment" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="对象" :label-width="formLabelWidth">
          <el-select v-model="editFrom.object" placeholder="请输入对象" >
            <el-option value="" label="不限" />
            <el-option v-for="itme in ObjList" :value="String(itme.objId)" :label="itme.objName" :key="String(itme.objId)" />
          </el-select>
        </el-form-item>
        <el-form-item label="标签" :label-width="formLabelWidth">
          <el-select v-model="editFrom.tag" multiple autocomplete="off">
            <el-option v-for="itme in labelList" :value="itme.labelId" :label="itme.labelName" :key="itme.labelId"/>
          </el-select>
        </el-form-item>
        <el-form-item label="发票号码" :label-width="formLabelWidth">
          <el-input v-model="editFrom.invoice" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showEdit= false">取 消</el-button>
        <el-button type="primary" @click="edit()">确 定</el-button>
      </div>
    </el-dialog>

  </div>


</template>

<script>
  import axios from "axios"
  import {listTradingrecord, updateTradingrecord, getTradingrecord} from '@/api/system/tradingrecord'
  import {addIncome, listIncome} from '@/api/system/income';
  import {addDisbures, listDisbures} from '@/api/system/disbures';
  import {addTransfer, listTransfer} from '@/api/system/transfer';
  import {listAccount, income} from '@/api/system/account'
  import {listCurrency} from '@/api/system/currency';
  import {listBalance, addBalance, updateBalance, getBalance} from '@/api/system/balance';
  import {listReason} from '@/api/system/reason';
  import {ListTransactionDetail, updateTransactionDetail} from '@/api/system/transactionDetail';
  import {delDetail, updateDetail} from '@/api/system/reasonDetail';
  import {deleteAccountDetail, updateAccountDetail} from '@/api/system/accountDetail';
  import { getInfo } from "@/api/login";
  import { listObj } from "@/api/system/obj";
  import { listLabel } from "@/api/system/label";
  export default {
    data() {
      return {
        queryParams:{},
        url: process.env.VUE_APP_BASE_API,
        incomeList: [],
        disburesList: [],
        transferList: [],
        balanceList: [],
        currencyList: [], //币种列表
        reasonSrList: [], //原因列表
        reasonZcList: [], //原因列表
        accountList: [],
        showEdit: false,
        formLabelWidth: "80px",
        editFrom: {
          transactionDate: '',
          proofDate: '',
          money: '',
          comment: '',
          object: '',
          tag: '',
          invoice: ''
        },
        downloadHerf: "http://localhost:8080/transactionDetailRest/export",
        dealData: '',
        vouData: '',
        dealOn: 0,
        vouOn: 0,
        tableData: [],
        page: 1,
        pagesize: 10,
        total: 0,
        accountOptions: [{
          dtype: '现金',
          options: []
        }, {
          dtype: '银行卡',
          options: []
        }, {
          dtype: '信用卡',
          options: []
        }],
        searchFrom: {
          pageNum: 1, // 条数
          pageSize: 7, // 页数
          object:''
        },
        ObjList:[],
        labelList:[],
        reasonList: [],//原因选中列表
        disbuersJe: 0,
        incomeJe: 0,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    // watch:{
    // 	searchFrom(val){
    // 		downloadHerf+=JSON.stringify(val)
    // 	}
    // },
    created() {


      getInfo().then(data=>{
        let obj={};
        obj.objCompany=data.tuser.ofCompany;
        listObj(obj).then(date=>{
          this.ObjList=date.rows;
          if(this.$route.query.objcet!=null || this.$route.query.objcet!=''){
            this.searchFrom.object=this.$route.query.objcet;
          }
        })
        let label={};
        label.labelCompany=data.tuser.ofCompany;
        listLabel(label).then(rep=>{
          this.labelList=rep.rows;
        })
        ListTransactionDetail({dtype: "收入",ofCompany:data.tuser.ofCompany}).then(date => {
          for (let i in date.rows) {
            this.incomeJe = parseFloat(this.incomeJe) + parseFloat(date.rows[i].money)
          }
        })
        ListTransactionDetail({dtype: "支出",ofCompany:data.tuser.ofCompany}).then(date => {
          for (let i in date.rows) {
            this.disbuersJe = parseFloat(this.disbuersJe) + parseFloat(date.rows[i].money)
          }
        })

      })
      getInfo().then(data=>{
        this.queryParams.ofCompany=data.tuser.ofCompany;
      })

      this.getData()

    },
    methods: {
      getData() {
        let that = this
        this.accountOptions = [{
          atype: '现金',
          options: []
        }, {
          atype: '银行卡',
          options: []
        }, {
          atype: '信用卡',
          options: []
        }]
        let account = {};
        account.stop = 0;
        getInfo().then(data=>{
          account.ofCompany=data.tuser.ofCompany;
          account.atype = "现金";
          listAccount(account).then(date => {
            this.accountOptions[0].options = date.rows;
          })
          account.atype = "银行存款";
          listAccount(account).then(date => {
            this.accountOptions[1].options = date.rows;
          })
          account.atype = "信用卡";
          listAccount(account).then(date => {
            this.accountOptions[2].options = date.rows;
          })
          listAccount({ofCompany:data.tuser.ofCompany}).then(date => {
            this.accountList = date.rows;
          })

          listCurrency().then(date => {
            this.currencyList = date.rows;
          })
          listReason({parent: "-1", rtype: "收入"}).then(date => {
            this.reasonSrList = date.rows;
          })
          listReason({parent: "-1", rtype: "支出"}).then(date => {
            this.reasonZcList = date.rows;
          })
          listReason().then(date => {
            this.reasonList = date.rows;
          })


            this.searchFrom.deleted = 0;
            this.searchFrom.ofCompany=data.tuser.ofCompany;
            ListTransactionDetail(this.searchFrom).then(res => {
              if (res.code == 200) {
                that.tableData = res.rows
                that.total = res.total
              }
            })



        })

      },
      //弹出项目修改
      showEditPop(row) {
        console.log(row);
        row.tag=row.tag.split(',')
        row.tag = row.tag.map( item => {
          return parseInt(item)
        })
        this.editFrom = row
        this.showEdit = true
      },
      //修改
      edit() {
        let that = this
        updateTransactionDetail(this.editFrom).then(res => {
          if (res.code == 200) {
            that.getData()
            that.$notify({
              title: '修改成功',
              type: 'success'
            });
          }
          that.showEdit = false
        })
      },
      //删除
      del(id) {
        let that = this
        this.$confirm('确认删除？').then(_ => {
          let td = {}
          td.tid = id;
          td.deleted = 1;
          updateTransactionDetail(td).then(res => {
            if (res.code == 200) {
              that.getData()
              that.$notify({
                title: '删除成功',
                type: 'success'
              });
            }
          })
          done();
        })
          .catch(_ => {
          });
      },
      handleSizeChange() {

      },
      handleCurrentChange() {
      },
      searchFun() {
        this.searchFrom.deleted = 0;
        getInfo().then(date=>{
          this.searchFrom.ofCompany=date.tuser.ofCompany;
          this.searchFrom.tag=String(this.searchFrom.tag.toString());
          ListTransactionDetail(this.searchFrom).then(data => {
            this.tableData = data.rows;
            this.total = data.total
          });
        })

      },
      /** 导出按钮操作 */
      handleExport() {
        let td = {};
        td.deleted = 0;
          this.download('/system/transactionDetail/export', {
            ...this.queryParams
          },`交易明细数据.xlsx`)

      },
      // 文件下载处理
      handleDownload(row) {
        this.download('/common/download/resource?resource=' + encodeURI(row.attachment), {
          ...this.queryParams
        }, row.attachment)
      }
    }
  }

</script>

<style lang="scss">
  .pagination_box {
    height: 60px;
    width: 100%;
    background-color: #fff;
  }

  .btn {
    padding: 4px 8px;
    color: white;
    border-radius: 4px;
  }

  .top_filter {
    font-size: 15px;
    padding: 10px 20px;
    background-color: #fff;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;

    &_col {
      padding: 4px 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-right: 10px;

      &_tit {
        white-space: nowrap;
        margin: 8px;
      }
    }
  }
</style>
